<template>
  <view class="Cbox">
    <image class="Cbox_bg" src="/static/image/coupon_bg.png" mode="scaleToFill" />
    <custom-navbar :immersive="true" title="优惠券"> </custom-navbar>
    <view class="Cbox_header" :style="{ paddingTop: `${navbarHeight}px` }"> </view>

    <view class="Cbox_content">
      <view class="Cbox_content_title">限时抢券</view>
      <view class="content">
        <scroll-view @scrolltolower="queryData" :scroll-top="scrollTop" :style="{ height: contentHeight + 'px' }" scroll-y="true" class="scroll-Y">
          <couponItem v-for="(item, index) in lists" :key="index" :item="item" :index="index" @receive="receive" :isReceive="true"></couponItem>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import { debounce, getScreen, getUserInfo } from '@/service/auth'

import proxyGoods from '@/utils/proxyGoods.js'
import navbarMixin from '@/mxins/navbar.js'
import { uniSearchBar } from '@/components/uniSearchBar.vue'
import { getBasWarehouseList } from '@/service/api/logistics'
import couponItem from '../components/couponItem'
import { customerUnCollectCouponList,collect } from '@/service/api/home'
export default {
  name: 'shopping',
  mixins: [navbarMixin],
  components: { uniSearchBar, couponItem },
  created() {
    const { width, height } = getScreen()
    this.contentHeight = height - (600 * width) / 750

    const app = getApp()

    const data = getUserInfo()
    this.user = JSON.parse(data)
    if (this.user) {
      this.customerId = this.user.customerIds
    }
  },
  onLoad(option) {
    this.init()
    this.onGet()
  },
  onShow() {
    const app = getApp()
  },
  mounted() {},
  watch: {
    lists: {
      handler(newVal) {},
      deep: true, // 深度监听对象内部值的变化
    },
  },
  data() {
    return {
      customerId: null,
      query: {
        page: 1,
        size: 20,
        lng: '',
        lat: '',
        keyword: '',
      },
      end: false,
      lists: [],

      currentIndex: 0,
      contentHeight: '',
    }
  },
  methods: {
    onGet: debounce(function () {
      uni.showLoading({ title: '加载中' })
      const data = {
        customerId: this.customerId,
        ...this.query,
      }
      customerUnCollectCouponList({ customerId: this.customerId }).catch(err => {
        console.log('err', err)
        uni.hideLoading()
        this.lists = err.content
      })
      // customerUnCollectCouponList(data).then(res => {
      //   console.log('res', res)
      //   uni.hideLoading()
      //   if (res.data.content.length < this.query.size) this.end = true
      //   this.lists = [...this.lists, ...res.data.content]
      // }).catch(err=>{
      //   console.log('err', res)
      // })
    }, 300),

    backs() {
      // const ware = this.lists.find(item => item.checked)
      // if (ware) {
      //   const eventChannel = this.getOpenerEventChannel()
      //   eventChannel.emit('acceptDataFromOpenedPage', ware)
      uni.navigateBack({
        delta: 1,
      })
      // }
    },
    init() {
      this.query.page = 1
      this.end = false
      this.lists = []
    },
    queryData() {
      console.log('queryData')
      if (this.end) return
      this.query.page++
      this.onGet()
    },

    queryCustomer(val) {
      this.query.keyword = val
      this.init()
      this.onGet()
    },
    receive(index) {
      console.log('receive', index)
      const item = this.lists[index]
      if (item) {
        // const couponIds = this.lists.map(item => item.id).join(',')
        uni.showLoading({ title: '获取中' })
        collect({ customerId: this.customerId, couponIds: item.id })
          .then(res => {
            uni.showToast({ title: '领取成功', icon: 'none' })
            this.init()
            this.onGet()
            uni.hideLoading()
          })
          .catch(err => {
            uni.showToast({ title: err.msg, icon: 'none', duration: 2000 })
            uni.hideLoading()
          })
      }
    },

    draw() {},
  },
}
</script>

<style lang="scss" scoped>
.Cbox {
  /* background-image: url('@/static/image/coupon_bg.png');
  background-repeat: no-repeat;
  background-size: cover; */
  height: 100vh;
  display: flex;
  flex-direction: column;
  &_bg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    z-index: -1;
  }
  &_content {
    background-color: white;
    margin: 20rpx;
    border-radius: 10rpx;
    flex: 1;
    overflow: hidden;
    &_title {
      padding: 20rpx 20rpx 0;
    }
    &_list {
      display: flex;
      position: relative;
      overflow-y: scroll;
      z-index: 1;
      &_left {
        width: 200rpx;
        background: #f5f6fa;
      }
      &_right {
        flex: 1;
      }
    }
  }
}
</style>
